/* --- Tokens ------------------------------------------------------------ */
:root {

  --vh: 1vh;

  /* Farben */
  --background: #000000;
  --white: #f6f8f0;
  --off-white: #ffff;
  --black: #000000;
  --yellow: rgb(222, 247, 28);
  --off-yellow: rgba(222, 247, 28, 0.13);

  /* Typografie */
  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Headings & Text  */
  --h1-size: 120px; --h1-line: 130px;  --h1-weight: 300;
  --h2-size: 110px; --h2-line: 130px;  --h2-weight: 100;
  --h3-size: 55px;  --h3-line: 60px;  --h3-weight: 400;
  --h4-size: 55px;  --h4-line: 60px;  --h4-weight: 100;
  --h5-size: 44px;  --h5-line: 50px;  --h5-wight: 400;
  --h6-size: 38px;  --h6-line: 40px;  --h6-weight: 200;
  --h7-size: 25px;  --h7-line:30px;   --h7-weight: 400;
  --h8-size: 30px;  --h8-line:30px;   --h8-weight: 100;
  --h9-size: 20px;  --h9-line:30px;   --h9-weight: 400;
  --h10-size:20px; --h10-line:30px;  --h10-weight: 100;
  --p-size: 20px;   --p-line:30px;    --p-weight: 300;


  --sb-width: 20px; /* track width */
  --sb-padding: 10px; /* distance from the window edge */
  --sb-color: var(--white); /* thumb + active dot */
  --sb-track: none; /* track bg */
  --sb-dot: var(--white); /* dot (inactive) */
  --sb-dot-size: 15px; /* base dot size */
  --safe-bottom: 40vh;
  --safe-top: 40vh;

  --content-width-img: 100%;
  --content-width-img2: 100%;

  /* Layout / Abstände */
  --page-pad: 2%;
  --space-2xs: 0.5vh;
  --space-xs:  1vh;
  --space-sm:  2vh;
  --space-md:  3vh;
  --space-lgg: 7vh;
  --space-lg:  10vh;
  --space-xl:  20vh;
  --space-2xl: 30vh;



  /* Sonstiges */
  --radius-pill: 25px;
  --transition: 0.3s;

}

.top {
  min-height: calc(var(--vh, 1vh) * 100);
}

/* Responsive Überschreibungen (optional) */
@media (max-width: 1000px) {
  :root {
    --h1-size: 64px;  --h1-line: 70px;
    --h2-size: 64px;  --h2-line: 70px;
    --h3-size: 40px;  --h3-line: 52px;
    --h4-size: 40px;  --h4-line: 52px;
    --h5-size: 32px;  --h5-line: 36px;
    --h6-size: 32px;  --h6-line: 36px;
    --h7-size: 20px;  --h7-line: 30px;
    --h8-size: 18px;  --h8-line: 30px;
    --p-size: 18px; --p-height:20px;
    --content-width-img: 55vh;
    --content-width-img2: 55vh;

  }
}

@media (max-width: 750px) {
  :root {
    --h1-size: 45px;  --h1-line: 50px;
    --h2-size: 45px;  --h2-line: 50px;
    --h3-size: 25px;  --h3-line: 33px;
    --h4-size: 25px;  --h4-line: 33px;
    --h5-size: 25px;  --h5-line: 25px;
    --h6-size: 25px;  --h6-line: 25px;
    --h7-size: 18px;  --h7-line: 18px;
    --h8-size: 14px;  --h8-line: 18px;
    --p-size: 14px; --p-height:18px; --p-line: 300;

    --content-width-img: 25vh;
  }
}

@media (max-width: 550px) {
  :root {
    --h1-size: 40px;  --h1-line: 50px;
    --h2-size: 40px;  --h2-line: 50px;
  }
}